<script lang="ts" setup>
  import { Menu } from '@sscd/menu';
  import Breadcrumb from '@sscd/breadcrumb';
</script>

<template>
  <div class="demo">
    <div class="demo-title">带下拉菜单的面包屑</div>
    <div class="demo-content">
      <Breadcrumb>
        <Breadcrumb.Item>Ant Design Vue</Breadcrumb.Item>
        <Breadcrumb.Item><a href="#list">Component List</a></Breadcrumb.Item>
        <Breadcrumb.Item>
          General
          <template #overlay>
            <Menu>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://design.ssc-hn.com">
                  General
                </a>
              </Menu.Item>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://design.ssc-hn.com">
                  Layout
                </a>
              </Menu.Item>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://design.ssc-hn.com">
                  Navigation
                </a>
              </Menu.Item>
            </Menu>
          </template>
        </Breadcrumb.Item>
        <Breadcrumb.Item>Button</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  </div>
</template>
